import React, { Component } from 'react';
import { View, Platform, StyleSheet, Text, Dimensions, TouchableOpacity, ScrollView, ListView, TextInput, Image, Alert, TouchableHighlight, Keyboard } from 'react-native';
import DateWeek from "./dateWeek";
import moment from 'moment';
import zhCn from 'moment/locale/zh-cn';
import ReportCalendar from './reportCalendar';
import api from '../../../../utils/api';
import { Flex, Toast } from 'antd-mobile-rn';;
import { SwipeListView } from 'react-native-swipe-list-view';
import { PanGestureHandler } from 'react-native-gesture-handler';
moment.locale("zh-cn");
const screen = Dimensions.get("window");
const colorsMap = {
    "红色": "#FF5A6F",
    "黄色": "#FCB03C",
    "绿色": "#00B7A5",
    "蓝色": "#005792",
    "灰色": "#969EB0",
}
const getDates = (date) => {

    const day = moment(date).get("day");

    console.log("ss:", moment(date).format("YYYY-MM-DD"), "---", day);
    const yesterday = moment(date).add(day * -1, "d").toDate();


    const dates = [];




    for (let i = 0; i < 7; i++) {
        dates.push(moment(yesterday).add(i, "d").toDate());
    }

    return dates;

}

const styles = StyleSheet.create({

    taskListBox: {
        borderColor: "#cccccc",
        borderWidth: 2,
        fontSize: 12,
        width: 20,
        height: 20,
        textAlign: "center",
        alignItems: "center",
        justifyContent: "center",
        marginTop: 1,
        color: "#ccc"
    },
    taskListItemName: {
        fontSize: 16,
        color: "#292B4D",
        paddingLeft: 10
        // marginLeft: 5
    },
    standalone: {
        marginTop: 30,
        marginBottom: 30,
    },
    standaloneRowFront: {
        alignItems: 'center',
        backgroundColor: '#CCC',
        justifyContent: 'center',
        height: 50,
    },
    standaloneRowBack: {
        alignItems: 'center',
        backgroundColor: '#8BC645',
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 15
    },
    backTextWhite: {
        color: '#FFF'
    },
    rowFront: {

        alignItems: 'center',
        backgroundColor: '#ffffff',
        height: 55,
        flexDirection: "row",
        borderRadius: 6,

    },
    rowBack: {
        alignItems: 'center',
        backgroundColor: "#fff",
        // flex: 1,
        flexDirection: 'row',
        height: 55,
        // marginBottom:10,
        borderRadius: 6,
    },
    backRightBtn: {
        alignItems: "flex-end",
        bottom: 0,
        justifyContent: 'center',
        position: 'absolute',
        top: 0,
        width: screen.width / 2,
        height: 55,
        borderBottomRightRadius: 6,
        borderTopRightRadius: 6,
        backgroundColor: "#FF5A6F",

    },
    backRightBtnLeft: {
        backgroundColor: 'blue',
        right: 75
    },
    backRightBtnRight: {
        backgroundColor: "#FF5A6F",
        right: 0
    }
});


export default class Task extends Component {

    static navigationOptions = () => {
        return {
            title: "任务",
            tabBarOnPress: (sceen) => {
                const { defaultHandler, navigation } = sceen;
                const onTabBarPress = navigation.getParam("onTabBarPress", () => { });
                if (onTabBarPress) {
                    onTabBarPress();
                }
                defaultHandler();
            }
        }
    }

    scrollView = null;

    state = {
        selectDate: new Date(),
        showCalendar: false,
        dateMap: {},
        taskList: [],
        addTaskName: "",
        showAddTask: false,
        showKeyboard: false,
        keyboardHeight: 0,
        showMove: false
    }

    ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

    // ds = new FlatList.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

    loadTaskList = (date) => {
        api({
            url: "/task/v2/currentIndexInfo",
            method: "POST",
            body: {
                currentDate: date.getTime()
            }
        }).then(data => {
            if (data.success) {
                this.setState({
                    taskList: data.result.dataVoList
                })
            }
        });
    }

    setTitleNavigation = (date) => {
        const titleNavigation = this.props.screenProps.navigation;
        let title = "";
        const nowDateStr = moment(new Date()).format("YYYY-MM-DD");
        const nowDate = moment(nowDateStr, "YYYY-MM-DD").toDate();
        const selectDateStr = moment(date).format("YYYY-MM-DD");
        const selectDate = moment(selectDateStr, "YYYY-MM-DD").toDate();
        if (selectDate.getTime() < nowDate.getTime()) {
            title = "过去的任务";
        }
        else if (selectDate.getTime() > nowDate.getTime()) {
            title = "未来的任务";
        } else {
            title = "今天的任务";
        }

        // this
        titleNavigation.setParams({
            "titleOptions": {
                title: title,
                headerLeft: (<View style={{ paddingLeft: 10 }}>
                    {nowDateStr != selectDateStr ? (
                        <TouchableOpacity
                            onPress={() => {
                                this.setState({
                                    selectDate: new Date()
                                });
                                this.setTitleNavigation(new Date());
                                this.loadTaskList(new Date())
                            }}
                        >
                            <Text style={{ color: "#697388", fontSize: 12 }}>回到今天</Text>
                        </TouchableOpacity>
                    ) : null}
                </View>),
                headerRight: (
                    <View style={{ paddingRight: 10 }}>
                        <Text style={{ color: "#697388", fontSize: 12 }}>{selectDateStr}</Text>
                    </View>

                )
            }
        });

    }

    componentDidMount() {


        const navigation = this.props.navigation;
        navigation.setParams({
            onTabBarPress: () => {
                this.setTitleNavigation(this.state.selectDate);
            }
        })
        this.setTitleNavigation(this.state.selectDate);
        //加载日历
        this.getTaskCalendar();
        //加载任务
        this.loadTaskList(this.state.selectDate);


    }

    componentWillMount() {
        this.keyboardDidShow = Keyboard.addListener("keyboardDidShow", (e) => {
            const { height } = e.endCoordinates;
            this.setState({
                showKeyboard: true,
                keyboardHeight: Platform.OS == "android" ? 100 : height - 80
            });
            setTimeout(() => {
                this.refs.taskScrollView.scrollToEnd();
            }, 1);

        });
        this.keyboardDidHide = Keyboard.addListener("keyboardDidHide", (e) => {
            this.setState({
                keyboardHeight: 0,
                showKeyboard: false,
            });
        })
    }

    componentWillUnmount() {
        this.keyboardDidShow.remove();
        this.keyboardDidHide.remove();
    }

    getTaskCalendar = () => {

        api({ url: "/task/v2/taskCalendar" }).then(data => {
            console.log("data::", data);
            this.setState({
                dateMap: data.result ? data.result : {}
            });
        })


    }

    getCalendarItemStyle = (date) => {
        const { selectDate } = this.state;
        const selectDateStr = moment(selectDate).format("YYYY-MM-DD");
        const str = moment(date).format("YYYY-MM-DD");
        if (str == selectDateStr) {
            return {
                backgroundColor: "#1E1F44",
                color: "#fff"
            }
        }
        return {};
    }

    getCalendarLineStyle = (date) => {
        const dateStr = moment(date).format("YYYY-MM-DD");
        const { dateMap } = this.state;
        const status = dateMap[dateStr];
        if (status != undefined) {
            return {
                backgroundColor: status == 0 ? "#FCB03C" : "#00B7A5"
            }
        }
        return {};
    }
    onCalendarItemClick = (date) => {
        this.setState({
            selectDate: date,
            showCalendar: false
        });
        this.setTitleNavigation(date);
        this.loadTaskList(date);
    }

    onAddTaskClick = () => {
        const { addTaskName, selectDate, taskList } = this.state;
        if (!addTaskName) {
            return;
        }
        this.setState({
            showAddTask: false
        });
        taskList.unshift({
            taskName: addTaskName,
            status: 0
        });

        this.setState({
            taskList: taskList
        });

        api({
            url: "/task/v2/quick/create",
            method: "POST",
            body: {
                currentDate: selectDate.getTime(),
                taskName: addTaskName
            }
        }).then(data => {
            this.setState({
                addTaskName: ""
            });
            if (data.success) {
                this.refs.taskScrollView.scrollTo({
                    x: 0,
                    y: 0,
                    animated: true
                })
                //加载日历
                this.getTaskCalendar();
                this.loadTaskList(selectDate);

            } else {
                Toast.info(data.msg);
            }
        }).catch(data => {
            this.setState({
                addTaskName: ""
            });
            Toast.info("操作失败..");
        })
    }

    /**
    * 删除任务
    */
    onRemoveTaskClick = (data, rowId) => {
        const { taskList, selectDate } = this.state;
        Alert.alert("提示", "是否删除该任务?", [
            { text: "取消" },
            {
                text: "确定", onPress: () => {
                    taskList.splice(rowId, 1);
                    this.setState({
                        taskList: taskList
                    });
                    api({
                        url: `/task/v2/deleteTask?taskId=${data.taskId}`,
                        method: "POST"
                    }).then(data => {
                        this.loadTaskList(selectDate);
                        this.getTaskCalendar();
                    })


                }
            },

        ], { cancelable: true })

    }

    /**
    * 完成任务
    */
    onTaskBoxClick = (data, status, ) => {

        const { taskList, selectDate } = this.state;

        const task = taskList.find(task => task.taskId == data.taskId);
        task.status = status;
        this.setState({
            taskList: taskList
        })



        api({
            url: "/task/v2/sign",
            method: "POST",
            body: {
                sign: status,
                taskId: data.taskId
            }
        }).then(data => {
            this.loadTaskList(selectDate);
            this.getTaskCalendar();
        })

        // taskService.sign({
        //     currentDate: currentDate.getTime(),
        //     sign: status,
        //     taskId: data.taskId
        // }).then(data => {
        //     this.loadTaskInfo(this.state.currentDate);
        // })

    }

    render() {

        const { selectDate, showCalendar, showAddTask, taskList, showKeyboard } = this.state;


        const taskDataList = [
            taskList.filter(task => task.status == 0),
            showKeyboard ? [] : taskList.filter(task => task.status == 1),
        ];



        return (
            <View style={{ flex: 1, position: "relative" }}>
                <View style={{ display: showCalendar ? "none" : "flex" }}>
                    <DateWeek
                        dates={getDates(selectDate)}
                        selectDate={selectDate}
                        onItemClick={(index, date) => {
                            this.setState({ selectDate: date });
                            this.setTitleNavigation(date);
                            this.loadTaskList(date);
                        }}
                        getLineStyle={this.getCalendarLineStyle.bind(this)}
                    >
                    </DateWeek>
                </View>
                <View style={{ display: showCalendar ? "flex" : "none", paddingBottom: 4, backgroundColor: "#fff" }}>
                    <Flex style={{ marginBottom: 4, paddingLeft: 15, paddingRight: 15 }}>
                        {
                            ['日', '一', '二', '三', '四', '五', '六'].map((d, i) => {
                                return (
                                    <Flex.Item key={i} style={{ alignItems: "center" }}>
                                        <Text style={{
                                            fontSize: 12,
                                            color: "#1E1F44"
                                        }}>周{d}</Text>
                                    </Flex.Item>
                                )
                            })
                        }
                    </Flex>
                    <Flex>
                        <ScrollView

                            horizontal={true}
                            pagingEnabled={true}
                            showsHorizontalScrollIndicator={false}
                            bounces={false}
                            contentOffset={{ x: screen.width }}
                            onMomentumScrollEnd={(event) => {
                                const scrollX = parseInt(event.nativeEvent.contentOffset.x);
                                const width = parseInt(screen.width);
                                if (scrollX > width) {
                                    const date = moment(selectDate).add(1, 'month').toDate()
                                    this.refs.scrollView.scrollTo({ x: screen.width, y: 0, animated: false });
                                    this.setState({
                                        selectDate: date
                                    });
                                    this.setTitleNavigation(date);
                                    this.loadTaskList(date);

                                } else if (scrollX < width) {
                                    const date = moment(selectDate).add(-1, 'month').toDate();
                                    this.refs.scrollView.scrollTo({ x: screen.width, y: 0, animated: false })
                                    this.setState({
                                        selectDate: date
                                    });
                                    this.setTitleNavigation(date);
                                    this.loadTaskList(date);


                                }

                            }}
                            onLayout={() => {
                                this.refs.scrollView.scrollTo({ x: screen.width, y: 0, animated: false })
                            }}
                            ref="scrollView"
                            onContentSizeChange={(e) => {
                                console.log("s::", e)
                                this.refs.taskScrollView.scrollToEnd();
                            }}


                        >
                            <View style={{ width: screen.width, opacity: 0.2 }}>
                                <ReportCalendar
                                    date={moment(selectDate).add(-1, 'month').toDate()}
                                    itemStyle={this.getCalendarItemStyle.bind(this)}
                                    lineStyle={this.getCalendarLineStyle.bind(this)}
                                    onItemClick={this.onCalendarItemClick.bind(this)}
                                ></ReportCalendar>
                            </View>
                            <View style={{ width: screen.width }}>
                                <ReportCalendar
                                    date={moment(selectDate).add(0, 'month').toDate()}
                                    itemStyle={this.getCalendarItemStyle.bind(this)}
                                    lineStyle={this.getCalendarLineStyle.bind(this)}
                                    onItemClick={this.onCalendarItemClick.bind(this)}
                                ></ReportCalendar>
                            </View>
                            <View style={{ width: screen.width, opacity: 0.2 }}>
                                <ReportCalendar
                                    date={moment(selectDate).add(1, 'month').toDate()}
                                    itemStyle={this.getCalendarItemStyle.bind(this)}
                                    lineStyle={this.getCalendarLineStyle.bind(this)}
                                    onItemClick={this.onCalendarItemClick.bind(this)}
                                ></ReportCalendar>
                            </View>
                        </ScrollView>
                    </Flex>
                </View>
                <View style={{
                    flexDirection: "row",
                    height: 25
                }}>


                    <View style={{
                        height: 1,
                        backgroundColor: "#ddd",
                        width: (screen.width - 0) * 0.4,

                    }}
                    >
                    </View>
                    <TouchableOpacity activeOpacity={1} onPress={() => {
                        this.setState({
                            showCalendar: !showCalendar
                        })
                    }}>
                        <View style={{
                            width: (screen.width - 0) * 0.2,
                            height: 18,
                            borderWidth: 1,
                            borderColor: "#ddd",
                            borderTopWidth: Platform.OS === "android" ? 0 : 1,
                            borderTopColor: "#fff",
                            borderBottomLeftRadius: ((screen.width - 0) * 0.2) / 2,
                            borderBottomRightRadius: ((screen.width - 0) * 0.2) / 2,
                            marginTop: 0,
                            alignContent: "center",
                            alignItems: "center",
                            justifyContent: "center",
                            backgroundColor: "#fff"

                        }}>
                            {/* {/* <Text style={{
                                fontSize: 8,
                                color: "#ddd"
                            }}>
                                {showCalendar ? '▲' : '▼'} 
                            </Text> */}
                            {
                                showCalendar ? (
                                    <Image source={require("./img/a-up.png")} style={{
                                        width: 12,
                                        height: 12
                                    }}></Image>
                                ) : (
                                        <Image source={require("./img/arr-down.png")} style={{
                                            width: 10,
                                            height: 10
                                        }}></Image>
                                    )
                            }

                        </View>
                    </TouchableOpacity>
                    <View style={{
                        width: (screen.width - 0) * 0.4,
                        backgroundColor: "#ddd",
                        height: 1,
                    }}
                    >
                    </View>


                </View>

                {/* <View
                      onMoveShouldSetResponder={e => this.state.showMove}
                      onResponderMove={e => {
                        console.log("e::", e);
                        if(this.state.showMove && this.refs.moveItem){
                            e.stopPropagation();
                            this.refs.moveItem.setNativeProps({
                                top: e.nativeEvent.pageY-200
                            });
                        }
                    
                    }}
                    onResponderEnd={e=>{
                        this.setState({
                            showMove:false

                        })
                    }}
                    style={{
                        flex:1
                    }}
                > */}



                <ScrollView
                    ref="taskScrollView"
                // scrollEnabled={!this.state.scrollViewEnabled}



                >
                    {
                        taskDataList.map((items, key) => {
                            return (
                                <View style={{ flex: 1, padding: 15, paddingTop: 0, paddingBottom: 20 }} key={key}>
                                    <SwipeListView
                                        enableEmptySections={true}
                                        // onRowOpen={()=>{
                                        //     this.setState({
                                        //         scrollViewEnabled:true
                                        //     })
                                        // }}
                                        // onRowClose={()=>{
                                        //     this.setState({
                                        //         scrollViewEnabled:false
                                        //     })
                                        // }}
                                        // onRowDidOpen={()=>{
                                        //     this.setState({
                                        //         scrollViewEnabled:false
                                        //     })
                                        // }}
                                        renderHeader={() => {
                                            if (items.length == 0 && key == 1) {
                                                return null;
                                            }
                                            return (
                                                <View style={{ flex: 1, flexDirection: "row", marginBottom: 10, alignItems: "center" }}>
                                                    <View style={{
                                                        width: 2,
                                                        backgroundColor: key == 0 ? "#FCB03C" : "#00B7A5",
                                                        borderRadius: 2,
                                                        height: 15
                                                    }}>

                                                    </View>
                                                    <Text style={{
                                                        fontSize: 14,
                                                        color: "#1E1F44",
                                                        marginLeft: 5
                                                    }}>{key == 0 ? "任务列表" : "完成的任务"}</Text>
                                                </View>
                                            )
                                        }}



                                        dataSource={this.ds.cloneWithRows(items)}


                                        renderRow={((data, secId, rowId, rowMap) => (
                                            <TouchableHighlight
                                                style={{
                                                    flex: 1,
                                                    height: 55,
                                                    borderRadius: 6,
                                                    backgroundColor: "#fff",
                                                    marginBottom: 5,
                                                    shadowColor: "#e6e6e6",
                                                    shadowOffset: {
                                                        height: 0.5,
                                                        // width:500
                                                    },
                                                    elevation: 0.1,
                                                    shadowOpacity: 0.5,
                                                    width: screen.width - 30


                                                }}
                                                underlayColor={"#FFF6E9"}
                                                onPress={() => {
                                                    const { navigation } = this.props.screenProps;

                                                    navigation.navigate("/task/detail", {
                                                        task: data,
                                                        back: () => {
                                                            this.loadTaskList(selectDate);
                                                            this.getTaskCalendar();
                                                        }
                                                    })

                                                }}

                                                onLongPress={(e) => {
                                                    // this.setState({
                                                    //     showMove: true
                                                    // });
                                                    // // e.stopPropagation();
                                                    // // e.
                                                    // // console.log(e.)
                                                    // this.refs.moveItem.setNativeProps({
                                                    //     top: e.nativeEvent.pageY-200
                                                    // });
                                                }}

                                            >
                                                <View style={{

                                                    height: 55,
                                                    flexDirection: "row",
                                                    flex: 1,
                                                    alignItems: "center",



                                                }} >

                                                    <TouchableOpacity

                                                        onPress={() => {
                                                            this.onTaskBoxClick(data, (key == 0 ? 1 : 0));
                                                        }}

                                                        style={{
                                                            width: 50,
                                                            height: 55,
                                                            justifyContent: "center"
                                                        }}

                                                    >



                                                        <View


                                                            style={{
                                                                width: 50, height: 30,
                                                                alignItems: "center",
                                                                justifyContent: "center",
                                                                borderRightWidth: 1,
                                                                borderRightColor: "#BFC5D2"
                                                            }}>

                                                            <View

                                                                style={{
                                                                    width: 22, height: 22, borderRadius: 6,
                                                                    backgroundColor: key == 0 ? "#FFF9F0" : "#CCF7F3",
                                                                    borderWidth: 1,
                                                                    borderColor: key == 0 ? "#FFD089" : "#00B7A5",
                                                                    alignItems: "center",
                                                                    alignContent: "center",
                                                                    justifyContent: "center"
                                                                }}>
                                                                {key == 1 ? (
                                                                    <Image source={require("./img/g.png")} style={{ width: 15, height: 15 }}></Image>
                                                                ) : null}

                                                            </View>


                                                        </View>
                                                    </TouchableOpacity>

                                                    <View style={{
                                                        width: 180,
                                                        height: 55,
                                                        justifyContent: "center",

                                                        // backgroundColor:"#ccc"
                                                    }}


                                                    >
                                                        <Text
                                                            numberOfLines={1}
                                                            style={{
                                                                color: "#1E1F44",
                                                                fontSize: 16,
                                                                paddingLeft: 10
                                                            }}
                                                        >
                                                            {data.taskName}
                                                        </Text>
                                                    </View>
                                                    <View style={{
                                                        alignItems: "flex-end",
                                                        // justifyContent:"center",
                                                        height: 55,
                                                        // width: Platform.OS == "ios" ? (screen.width - 260) : (screen.width - 280),
                                                        width: (screen.width - 265),
                                                     
                                                        // backgroundColor: "#ccc",
                                                        



                                                    }}>
                                                        <View
                                                          style={{
                                                            flexDirection: "row",
                                                            alignItems:"center",
                                                            height:55,
                                                            marginRight:5,
                                                            // backgroundColor:"#000"

                                                          }}
                                                        >
                                                            <View style={{
                                                                // width: Platform.OS == "ios" ? (screen.width - 265) : (screen.width - 285),
                                                                // backgroundColor: "#ffffff",
                                                                height:55,
                                                                alignItems:"center",
                                                                justifyContent:"center",
                                                                marginRight:5
                                                            }}>
                                                                <Text numberOfLines={1} style={{
                                                                    fontSize: 12,
                                                                    color: "#697388",
                                                                    // paddingRight: 5,
                                                                    textAlign: "right"
                                                                }}>{data.practiceTitle}</Text>
                                                            </View>

                                                            <View style={{
                                                                height: 40,
                                                                width: 2,
                                                                borderRadius: 6,
                                                                backgroundColor: data.tag ? colorsMap[data.tag] : "#fff",
                                                                alignItems: "flex-end"
                                                            }}>

                                                            </View>
                                                        </View>
                                                    </View>
                                                </View>
                                            </TouchableHighlight>
                                        ))}
                                        renderHiddenRow={(data, secId, rowId, rowMap) => {
                                            const rowKey = `${secId}${rowId}`;

                                            return (
                                                <View style={styles.rowBack}>
                                                    <TouchableOpacity style={[styles.backRightBtn, styles.backRightBtnRight]} onPress={() => {
                                                        const row = rowMap[rowKey];
                                                        if (row) {
                                                            row.closeRow();
                                                        }
                                                        this.onRemoveTaskClick(data, rowId)
                                                    }}>
                                                        <Image source={require("./img/delete.png")} style={{ width: 20, height: 20, marginRight: 18 }}></Image>
                                                    </TouchableOpacity>
                                                </View>
                                            );
                                        }}
                                        rightOpenValue={-55}
                                        disableRightSwipe={true}
                                        // keyboardShouldPersistTaps={"handled"}
                                        // keyboardDismissMode={"interactive"}
                                        renderFooter={(a) => {
                                            if (key == 1) {
                                                return null;
                                            }

                                            if (showAddTask) {
                                                return (

                                                    <View style={{
                                                        borderRadius: 6,
                                                        backgroundColor: "#fff",
                                                        padding: 10
                                                    }}>
                                                        <View>
                                                            <TextInput
                                                                style={{
                                                                    borderWidth: 1,
                                                                    borderColor: "#E6E6E6",
                                                                    borderRadius: 3,
                                                                    height: 40,
                                                                    paddingLeft: 10,
                                                                    color: "#000",
                                                                    fontSize: 17
                                                                }}
                                                                value={this.state.addTaskName}
                                                                onChangeText={(value) => {
                                                                    this.setState({
                                                                        addTaskName: value
                                                                    });
                                                                }}
                                                                returnKeyLabel={"确定"}
                                                                returnKeyType={"done"}
                                                                autoFocus={true}
                                                                onFocus={(e) => {
                                                                    // //console.log("1ss:", e.target)

                                                                    // this.setState({
                                                                    //     showKeyboard:true
                                                                    // });
                                                                }}
                                                                onSubmitEditing={(e) => {
                                                                    const text = e.nativeEvent.text;
                                                                    if (!text) {
                                                                        return;
                                                                    }
                                                                    this.onAddTaskClick();
                                                                }}

                                                            ></TextInput>
                                                        </View>
                                                        <View style={{ flexDirection: "row", flex: 1, height: 30, alignItems: "center" }}>
                                                            <View style={{ width: "50%", alignItems: "flex-start" }}>
                                                                <TouchableOpacity onPress={() => {
                                                                    this.setState({
                                                                        showAddTask: false,
                                                                        addTaskName: ""
                                                                    })
                                                                }} activeOpacity={0.2}>
                                                                    <Text style={{ fontSize: 14, color: "#1E1F44", opacity: 0.5, padding: 10 }}>取消</Text>
                                                                </TouchableOpacity>
                                                            </View>
                                                            <View style={{ width: "50%", alignItems: "flex-end" }}>
                                                                <TouchableOpacity onPress={this.onAddTaskClick.bind(this)} activeOpacity={0.5}>
                                                                    <Text style={{ padding: 10, fontSize: 14, color: "#1E1F44" }}>添加</Text>
                                                                </TouchableOpacity>

                                                            </View>
                                                        </View>
                                                    </View>

                                                )
                                            }



                                            return (

                                                <TouchableOpacity activeOpacity={0.5} style={styles.rowFront} onPress={() => {
                                                    this.setState({
                                                        showAddTask: true,
                                                        showKeyboard: true
                                                    });
                                                    // this.refs.taskScrollView.scrollToEnd();
                                                }}>
                                                    <View style={{ width: 50, height: 30, alignItems: "center", justifyContent: "center" }}>
                                                        <View style={{
                                                            width: 22, height: 22, borderRadius: 11,
                                                            backgroundColor: "#fff", borderWidth: 1, borderColor: "#969EB0",
                                                            alignItems: "center",
                                                            justifyContent: "center"
                                                        }}>
                                                            <Text style={{ color: "#969EB0", fontSize: 14 }}>+</Text>
                                                        </View>
                                                    </View>
                                                    <View style={{
                                                        paddingLeft: 5
                                                    }}>

                                                        <Text style={{
                                                            fontSize: 15,
                                                            color: "#1E1F44"
                                                        }}>添加新任务</Text>
                                                    </View>

                                                </TouchableOpacity>

                                            );
                                        }}


                                    />


                                </View>
                            );
                        })
                    }

                    {showKeyboard ? (
                        <View style={{ height: this.state.keyboardHeight }}>

                        </View>
                    ) : null}

                    {
                        this.state.showMove ? (<View style={{ paddingLeft: 15, paddingRight: 15, position: "absolute", top: 0, width: "100%" }} ref="moveItem">
                            <View style={{ height: 55, backgroundColor: "#fff", borderRadius: 6, borderWidth: 1, borderColor: "#e6e6e6" }}></View>
                        </View>) : null
                    }


                </ScrollView>
                {/* </View> */}




            </View>
        )
    }
}